<template v-if="showData">
	<view class="time1" v-if="showData">
		<view class="bg">

		</view>
		<view class="time_main">
			<view class="top flex justify-between align-center">
				<text @tap="cancel">取消</text>
				<text>选择时间段</text>
				<text @tap="confirm">确定</text>
			</view>
			<picker-view @change="getime" class="picker" :value="value" indicator-style="height:30px;">
				<picker-view-column>
					<view class="item" v-for="(item,index) in hoursList" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item">-</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in hoursList" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>

	</view>
</template>

<script>
	let minutes = []
	for (let i = 0; i <= 59; i++) {
		if (i < 10) {
			i = "0" + i
		}
		minutes.push(i)
	}
	export default {
		props: {
			time: {
				type: Array,
				default () {
					return ['15', '0', '0', '18', '0'];
				}
			},
			isUnder: {
			 type: Boolean,
				default: false
			}
		},
		watch: {
			isUnder(newData, oddData) {
				this.showData = newData
			},
			time: function() {
				this.value = this.time
			}
		},
		data() {
			return {
				showData: this.isUnder,
				minutes,
				value: this.time,
				hoursList: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
					'16', '17', '18', '19', '20', '21', '22', '23'
				],
			}
		},
		methods: {
			cancel() {
				let time = this.value[0] + ":" + this.value[1] + "-" + this.value[3] + ":" + this.value[4]
				this.$emit("cancel", {
					time: time
				})
				this.showData = false
			},
			confirm() {

				let time = this.value[0] + ":" + this.value[1] + "-" + this.value[3] + ":" + this.value[4]
				this.$emit("timeConfirm", {
					time: time
				})
				this.showData = false
			},
			getime(e) {
				let val = e.detail.value
				if((val[0]??'') !== ''){
					this.value[0] = this.hoursList[val[0]]
				}
				if((val[0]??'') !== ''){
					this.value[1] = this.minutes[val[1]]?this.minutes[val[1]]:"00"
				}else{
					this.value[1]="00"
				}
				this.value[2] = val[2]
				if((val[3]??'') !== ''){
					this.value[3] = this.hoursList[val[3]]
				}
				if((val[4]??'') !== ''){
					this.value[4] = this.minutes[val[4]]?this.minutes[val[4]]:"00"
				}else{
					this.value[4]="00"
				}
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.2);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.time1 {
		.time_main {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 99;
			background-color: #fff;
			width: 100%;
		}

		width:100%;
		color: #000;
		position: fixed;
		top: 0;
		left:0;
		height: 100vh;
		z-index: 99991;

		.top {
			width: 640rpx;
			margin: 0 auto;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;

			text {
				font-weight: bold;

				&:nth-child(1) {
					font-size: 28rpx;
					color: #999;
				}

				&:nth-child(3) {
					font-size: 28rpx;
					color: #0A84FF;
				}
			}
		}
	}

	.picker {
		width: 650rpx;
		height: 300rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

		.item {
			text-align: center;
			font-size: 32rpx;
		}
	}
</style>
